<page-header />

<div class="row">
  <div class="col-sm-12">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Inline</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form>
          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Username</mat-label>
            <input matInput [(ngModel)]="q.username" name="username" />
          </mat-form-field>

          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput [(ngModel)]="q.email" name="email" />
          </mat-form-field>

          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Gender</mat-label>
            <mat-select [(ngModel)]="q.gender" name="gender">
              <mat-option>-- None --</mat-option>
              <mat-option value="1">male</mat-option>
              <mat-option value="2">female</mat-option>
            </mat-select>
          </mat-form-field>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-sm-4">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Horizontal</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form [formGroup]="reactiveForm1" class="form-field-full">
          <mat-form-field>
            <mat-label>Username</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="username" required />
            @if (reactiveForm1.get('username')?.invalid) {
              <mat-error>{{ 'validation.required' | translate }}</mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>Gender</mat-label>
            <mat-select required formControlName="gender" required>
              <mat-option>-- None --</mat-option>
              <mat-option value="1">male</mat-option>
              <mat-option value="2">female</mat-option>
            </mat-select>
            @if (reactiveForm1.get('gender')?.invalid) {
              <mat-error>{{ 'validation.required' | translate }}</mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>Mobile</mat-label>
            <input
              matInput
              placeholder="Simple placeholder"
              type="number"
              formControlName="mobile"
              required
            />
            <mat-icon matSuffix>smartphone</mat-icon>
            @if (reactiveForm1.get('mobile')?.invalid) {
              <mat-error>{{ 'validation.required' | translate }}</mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>Email</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="email" required />
            @if (reactiveForm1.get('email')?.invalid) {
              <mat-error>{{ getErrorMessage(reactiveForm1) | translate }}</mat-error>
            }
          </mat-form-field>

          <mat-form-field>
            <mat-label>City</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="city" />
          </mat-form-field>

          <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="address" />
          </mat-form-field>

          <mat-form-field>
            <mat-label>Company</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="company" />
          </mat-form-field>

          <mat-form-field>
            <mat-label>Tele</mat-label>
            <input matInput placeholder="Simple placeholder" type="number" formControlName="tele" />
            <mat-icon matSuffix>phone</mat-icon>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Website</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="website" />
          </mat-form-field>

          <mat-form-field>
            <input
              matInput
              [matDatepicker]="picker"
              placeholder="Choose a date"
              formControlName="date"
            />
            <mat-datepicker-toggle matSuffix [for]="picker" />
            <mat-datepicker #picker />
          </mat-form-field>

          <div class="m-t-8 d-flex justify-content-end">
            <button mat-button class="m-x-8" type="button">Cancel</button>
            <button mat-flat-button>Save</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-sm-8">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Horizontal</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form [formGroup]="reactiveForm2" class="form-field-full">
          <div class="row">
            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Username</mat-label>
                <input
                  matInput
                  placeholder="Simple placeholder"
                  formControlName="username"
                  required
                />
                @if (reactiveForm2.get('username')?.invalid) {
                  <mat-error>{{ 'validation.required' | translate }}</mat-error>
                }
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Gender</mat-label>
                <mat-select required formControlName="gender" required>
                  <mat-option>-- None --</mat-option>
                  <mat-option value="1">male</mat-option>
                  <mat-option value="2">female</mat-option>
                </mat-select>
                @if (reactiveForm2.get('gender')?.invalid) {
                  <mat-error>{{ 'validation.required' | translate }}</mat-error>
                }
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Mobile</mat-label>
                <input
                  matInput
                  placeholder="Simple placeholder"
                  type="number"
                  formControlName="mobile"
                  required
                />
                <mat-icon matSuffix>smartphone</mat-icon>
                @if (reactiveForm2.get('mobile')?.invalid) {
                  <mat-error>{{ 'validation.required' | translate }}</mat-error>
                }
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Email</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="email" required />
                @if (reactiveForm2.get('email')?.invalid) {
                  <mat-error>{{ getErrorMessage(reactiveForm2) | translate }}</mat-error>
                }
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>City</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="city" />
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Address</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="address" />
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Company</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="company" />
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Tele</mat-label>
                <input
                  matInput
                  placeholder="Simple placeholder"
                  type="number"
                  formControlName="tele"
                />
                <mat-icon matSuffix>phone</mat-icon>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Website</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="website" />
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <input
                  matInput
                  [matDatepicker]="picker2"
                  placeholder="Choose a date"
                  formControlName="date"
                />
                <mat-datepicker-toggle matSuffix [for]="picker2" />
                <mat-datepicker #picker2 />
              </mat-form-field>
            </div>
          </div>

          <div class="m-t-8">
            <button mat-flat-button>Save</button>
            <button mat-button class="m-x-8" type="button">Cancel</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
